import React, {Component} from 'react';
import './index.css';
import theme from './../Css/theme'; //主题色

// 插件部分
import {Menu} from 'antd';
import {Select} from 'antd';
const {Option} = Select;

// 页面头部导航栏
export default class Head extends Component {
  constructor (props) {
    super (props);
    this.state = {
      MenuList: [
        {
          lable: '票务档案',
        },
      ], //切换的选项
      activityIdList: [
        {
          activityId: 45,
          title: '7月1号售票',
        },
        {
          activityId: 46,
          title: '8月1号售票',
        },
      ], //活动列表
      current: '0', //当前切换的选项
    };
  }
  // 切换方法
  handleClick = e => {
    this.setState ({
      current: e.key,
    });
  };
  onChange (value) {
    console.log (`selected ${value}`);
  }
  onSearch (val) {
    console.log ('search:', val);
  }
  render () {
    return (
      <div
        style={{backgroundColor: theme.backgroundColor}}
        className="head-box cenBet"
      >
        {/* 左边部分 */}
        <div className="head-left">
          <Menu
            style={{
              color: theme.textColor,
              backgroundColor: theme.backgroundColor,
              lineHeight: '66px',
            }}
            onClick={this.handleClick}
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['1']}
            selectedKeys={[this.state.current]}
          >
            {this.state.MenuList.map ((item, index) => {
              return (
                <Menu.Item style={{height: 66}} key={index}>
                  {item.lable}
                </Menu.Item>
              );
            })}
          </Menu>
        </div>
        {/*右侧部分 */}
        <div className="head-right">
          <Select
            showSearch
            style={{minWidth: 200}}
            placeholder="请选择"
            optionFilterProp="children"
            notFoundContent="没有更多啦"
            size="large"
            onChange={this.onChange}
            onSearch={this.onSearch}
            filterOption={(input, option) =>
              option.props.children
                .toLowerCase ()
                .indexOf (input.toLowerCase ()) >= 0}
          >
            {this.state.activityIdList.map ((item, index) => {
              return (
                <Option value={item.activityId} key={index}>
                  {item.title}
                </Option>
              );
            })}
          </Select>,
        </div>
      </div>
    );
  }
}
